<template>
	<view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map :id="mapId" style="width: 100vw; height: 100vh;" @regionchange="$u.throttle(getHouseMark,1000)" :latitude="lat"
					:longitude="lng" :markers="covers" @markertap="mark">
				</map>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				swlatitude:"",  //西南纬度
				swlongitude:"", //西南经度
				nelatitude:"",  //东北纬度
				nelongitude:"", //东北经度
				mapId: 'myMap', // 地图组件的id，用于创建地图上下文对象
				lng: "",
				lat: "",
				id: 0, // w使用 marker点击事件 需要填写id
				title: 'map',
				covers: [{
					id: "1",
					joinCluster: "ture",
					latitude: 26.884861,
					longitude: 112.68206,
					callout: {
						content: "这里是1",
						display: "BYCLICK",
						color: "#blue",
						fontSize: "12",
						bgColor: "#F76425",
						borderRadius: "5",
						padding: '10',
					},
				}, {
					id: "2",
					joinCluster: "ture",
					latitude: 26.879188,
					longitude: 112.683913,
					callout: {
						content: "这里是2",
						display: "BYCLICK",
						color: "#blue",
						fontSize: "12",
						bgColor: "#F76425",
						borderRadius: "5",
						padding: '10',
					},
				}]
			};
		},
		methods: {
			test() {
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: 'ture',
					highAccuracyExpireTime: '6000',
					success: res => {
						// console.log('当前位置的经度：' + res.longitude);
						// console.log('当前位置的纬度：' + res.latitude);
						this.lng = res.longitude
						this.lat = res.latitude
					}
				});

			},
			test1() {
				const mapContext = uni.createMapContext(this.mapId, this);
				// 这里的mapContext就是地图上下文对象，可以调用地图相关的方法
				mapContext.getRegion({
					success: res => {
						this.swlatitude = res.southwest.latitude,
						this.swlongitude = res.southwest.longitude,
						this.nelatitude = res.northeast.latitude,
						this.nelongitude = res.northeast.longitude,
						console.log(this.swlatitude)
						console.log(this.swlongitude)
						console.log(this.nelatitude)
						console.log(this.nelongitude)
					}
				});
			},
			getHouseMark(){
				this.test1()
				uni.request({
					url:"TN-INDEX/house/getHouse",
					method: 'get',
					data:{
						swlatitude:this.swlatitude,
						swlongitude:this.swlongitude,
						nelatitude:this.nelatitude,
						nelongitude:this.nelongitude,
					},
					success:res=>{
						let a = res.data.data
						let tmp = [];
						console.log(a)
						a.forEach(var1=>{
							let geo = {
								joinCluster: "ture",
								id :var1.id,
								latitude : var1.lat,
								longitude : var1.lng
							}
							tmp.push(geo);
						})
						this.covers = tmp
						console.log(this.covers)
					}
				})
			},
			mark(e) {
				console.log("mark", e.detail.markerId)
			}
		},
		onLoad() {
			this.test()
		}
	}
</script>

<style lang="scss">
	.map {
		height: 100vh;
		width: 100vw;
	}
</style>